<!doctype html>
<html lang="zh" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>创建我的账户</title>  
  
  <link rel="stylesheet" href="/static/weixin/css/app.css">
  
   <script src="/static/weixin/js/config.js"></script>

  <script src="/static/weixin/js/newcustomer.js"></script>

  <script>
    ons.ready(function() {
    });
  </script>
  
</head>
<body ng-controller="CreateNewCustomerController">
    <ons-modal var="main.modal">
        <ons-icon icon="gear" spin="true" style="line-height: 20px; vertical-align: middle;" ></ons-icon>
        <span style="line-height: 20px; font-size: 15px;">获取数据中。。。</span>
    </ons-modal>
  <ons-navigator var="createNav" title="创建">
    <ons-page class="form_page" ng-controller="BasicFormController">
      <div class="list-header">基本信息</div>
      <ons-list modifier="inset" style="margin-top:10px">
        <ons-list-item>
            <ons-row>
                <ons-col width="60px">
                    姓名
                </ons-col>
                <ons-col>
                    <input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="请填写姓名" style="margin-left:5px; width:100%">
                </ons-col>
            </ons-row>
        </ons-list-item>
        <ons-list-item>
            <ons-row>
                <ons-col width="60px">
                    性别
                </ons-col>
                <ons-col>
                    <span class="input-text" ng-show="isMale">男</span><span class="input-text" ng-show="!isMale">女</span>
                    <ons-switch modifier="list-item" ng-model="isMale"></ons-switch>
                </ons-col>
            </ons-row>
        </ons-list-item>
        <ons-list-item modifier="chevron" ng-click="showPage('createVehicle.html')"> 
             <ons-row>
                <ons-col width="60px">
                    车型 
                </ons-col>
                <ons-col>
                    <span class="input-text">{{selectedTrim.fullName}}</span>
                </ons-col>
            </ons-row>
          
        </ons-list-item>
        <ons-list-item> 
            <ons-row>
                <ons-col width="60px">
                    车牌号
                </ons-col>
                <ons-col>
                    <input type="text" class="text-input text-input--transparent" ng-model="license_plate" placeholder="请填写车牌号" style="margin-left:5px; width:85%">
                </ons-col>
            </ons-row>
        </ons-list-item>
      </ons-list>

      <div class="list-header">联系方式</div>
      <ons-list style="margin-top:10px" modifier="inset">
        <ons-list-item>
          <ons-row>
            <ons-col width="50px">+86</ons-col>
            <ons-col>
              <input type="text" ng-model="phone" class="text-input text-input--transparent" placeholder="请输入您的手机号" style="width: 100%" />
            </ons-col>
          </ons-row>  
        </ons-list-item>
        <ons-list-item>
          <ons-row>
            <ons-col>
              <input type="text" ng-model="verificationCode" class="text-input text-input--transparent" placeholder="请输入验证码" style="width: 100%" /> 
            </ons-col>
            <ons-col width="100px">
              <ons-button ng-click="getValidateNumbers($event)" ng-attr-disabled="{{!canSendCode}}" style="width:90px;height:30px; padding: 5px 10px; font-size:12px; line-height:20px; text-align:center">{{buttonLabel}}</ons-button>
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
      <div style="padding: 10px 9px 0 9px; margin-top: 30px">
        <ons-button modifier="large" style="margin: 0 auto;" ng-click="createMe()">
          验证并创建我的账户
        </ons-button>
      </div>
    </ons-page>
  </ons-navigator>

  <ons-template id="createVehicle.html">
    <ons-page ng-controller="DealerVehicleController">
      <ons-list modifier="inset" style="margin-top:10px">
        <ons-list-item modifier="chevron" ng-click="showPage('selectModels.html')">
          选车系 <span class="input-text">{{ selectedModel.fullName }}</span>
        </ons-list-item>
        <ons-list-item modifier="chevron" ng-click="showPage('selectModelYears.html')">
          选款(年份) <span class="input-text">{{ selectedModelYear.year }}</span>
        </ons-list-item>
        <ons-list-item modifier="chevron" ng-click="showPage('selectTrims.html')">
          选车型 <span class="input-text">{{ selectedTrim.name }}</span>
        </ons-list-item>
      </ons-list>
      <div style="margin-top: 30px">
        <ons-row>
            <ons-col width="50%" style="padding: 10px 5px 0 9px; ">
                <ons-button modifier="large" style="margin: 0 auto;" ng-click="saveVehicle()">
                  确定
                </ons-button>
            </ons-col>
            <ons-col width="50%"  style="padding: 10px 9px 0 5px; ">
                <ons-button modifier="large" style="margin: 0 auto;background-color:#eb482f" ng-click="createNav.popPage()">
                  取消
                </ons-button>
            </ons-col>
        </ons-row>
      </div>
    </ons-page>
  </ons-template>

  <ons-template id="selectModels.html">
    <ons-page ng-controller="DealerModelsController">
      <!--
<ons-toolbar>
        <div class="right"><ons-back-button>取消</ons-back-button></div>
      </ons-toolbar>
-->
      <ons-list>
        <ons-list-item ng-show="!models.length" ng-click="createNav.popPage()">没有可选车系</ons-list-item>
        <ons-list-item ng-repeat="v in models" modifier="tappable">
          <label class="radio-button radio-button--list-item" >
            <input type="radio" name="b" ng-checked="v.id == selectedModel.id"  ng-click="selectModel(v, $event)">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            {{ v.fullName }}
          </label> 
        </ons-list-item>
      </ons-list>
      
    </ons-page>
  </ons-template>

   <ons-template id="selectModelYears.html">
    <ons-page ng-controller="DealerModelYearsController">
      <!--
<ons-toolbar>
        <div class="right"><ons-back-button>取消</ons-back-button></div>
      </ons-toolbar>
-->
      <ons-list>
        <ons-list-item ng-show="!modelYears.length" ng-click="createNav.popPage()">没有可选车款</ons-list-item>
        <ons-list-item ng-repeat="v in modelYears" modifier="tappable">
          <label class="radio-button radio-button--list-item" >
            <img ng-src="{{v.image}}" alt="车型图" width="100" height="50" style="float:right"/>
            <input type="radio" name="b" ng-checked="v.id == selectedModelYear.id"  ng-click="selectModelYear(v, $event)">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            {{ v.year }}
          </label> 
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>


  <ons-template id="selectTrims.html">
    <ons-page ng-controller="DealerTrimsController">
      <!--
<ons-toolbar>
        <div class="right"><ons-back-button>取消</ons-back-button></div>
      </ons-toolbar>
-->
      <ons-list>
        <ons-list-item ng-show="!trims.length" ng-click="createNav.popPage()">没有可选车型</ons-list-item>
        <ons-list-item ng-repeat="v in trims" modifier="tappable">
          <label class="radio-button radio-button--list-item" >
            <input type="radio" name="b" ng-checked="v.id == selectedTrim.id"  ng-click="selectTrim(v, $event)">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            {{ v.name }}
          </label> 
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

</body>
</html>